<script type="text/javascript" src="<?php echo Yii::app()->baseUrl?>/static/vue/vue.min.js"></script>
<div class="weadmin-body layui-main" id="app">
    <form class="layui-form">
        <div class="layui-form-item">
            <label for="username" class="layui-form-label">
                <span class="we-red">*</span>标题
            </label>
            <div class="layui-input-block">
                <input type="text" id="title" name="title" required="" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="username" class="layui-form-label">
                <span class="we-red">*</span>图片
            </label>
            <div class="layui-input-block">
                <div class="layui-upload-drag" id="upload_eara">
                    <i class="layui-icon"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                </div>
            </div>
            <div class="layui-form-item" v-if="file_sign">
                <label for="username" class="layui-form-label">
                    <span class="we-red"></span>预览
                </label>
                <div class="layui-input-block">
                    <img v-bind:src="'<?php echo $upload_url?>/'+file_sign" alt="" width="100" height="100">
                    <input type="hidden" name="file_sign" lay-verify="required" v-model="file_sign">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label for="note" class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" id="note" name="note" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
            </label>
            <button class="layui-btn" lay-filter="add" lay-submit="">增加</button>
        </div>
        <input type="hidden" name="type" value="<?php echo $type?>">
    </form>
</div>
<script>
     new Vue({
        el:'#app',
        data:{
            file_sign:''
        },
        mounted:function () {
            this.layui_init();
        },
        methods:{
            layui_init:function () {
                var app = this;
                layui.use(['form', 'upload', 'jquery', 'layer'], function() {
                    var form = layui.form,
                        upload = layui.upload,
                        $ = layui.jquery,
                        layer = layui.layer;
                    //拖拽上传
                    upload.render({
                        elem: '#upload_eara',
                        url: '<?php echo $this->createUrl('flash/upload',array('type'=>$type))?>',
                        size:<?php echo $size?>,
                        done: function(res){
                            if (res.code != 0) {
                                layer.msg(res.message, {time: 3000, icon: 2});
                            } else {
                                app.file_sign = res.data;
                                layer.msg(res.message, {time: 1000, icon: 1});
                            }
                        }
                    });

                    //监听提交
                    form.on('submit(add)', function(data) {
                        $.post('<?php $this->createUrl('flash/add')?>', data.field,function (ret) {
                            if (ret.code == 0) {
                                layer.msg('添加成功!',{icon: 1,time:800}, function () {
                                    if (window == window.top) {
                                        $('form')[0].reset();
                                    } else {
                                        var index = parent.layer.getFrameIndex(window.name);
                                        parent.layer.close(index);
                                        window.parent.location.reload();//刷新父界面
                                    }
                                });
                            } else {
                                layer.alert(ret.message);
                            }
                        });
                        return false;
                    });

                });
            }
        }
    });

</script>
